<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes move{
            /* 0%表示动画开始的关键帧 */
            0%{
                transform:  translate(0,0)
            }
            25%{
                transform: translate(300px,0)
            }
            50%{
                transform: translate(300px,300px);
            }
            75%{
                transform: translate(0,300px)
            }
            /* 100%表示动画结束时的关键帧 */
            100%{
                transform: translate(0px,0px);
            }
        }

        .xph_h1{
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: blanchedalmond;
            transform: all 0.7s ease-in-out;
            animation: move 2s infinite;
        }
    </style>
</head>
<body>
    <h1 class="xph_h1">许鹏辉</h1>
    <p>123</p>
</body>
</html>